<script lang="ts" setup>
import { ref, reactive, watch } from "vue"
import { type getRegulator } from "@/api/personnel/personnel-list/types/index"
import { usePagination } from "@/hooks/usePagination"
import { getRegulatorDataApi } from "@/api/personnel/personnel-list/index"
import { FormInstance } from "element-plus"
import { Search, Refresh } from "@element-plus/icons-vue"
defineOptions({
  name: "personneChildren"
})
// tab栏切换页面
const activeName = ref("first")
// 页面加载优化
const loading = ref(true)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
const searchData = reactive({
  team: "",
  job: ""
})
// 查 列表数据
// 发布完成后 待审核 状态码为0   管理员审核通过后  未完成  状态变为 1       人事主管确认后  已完成  状态变为 3   管理员不通过  状态码变为 4

// #region  未完成
const tableData = ref<getRegulator[]>([])
const tableTotal = ref<number>()
const getAddRegulator = () => {
  getRegulatorDataApi({
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    state: "1",
    team: searchData.team,
    job: searchData.job
  })
    .then((res: any) => {
      tableData.value = res.data.taskList
      tableTotal.value = res.data.total
      console.log(tableData.value, "页面所有数据")
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
// 已完成
const tableData1 = ref<getRegulator[]>([])
const tableTotal1 = ref<number>()
const getAddRegulator1 = () => {
  getRegulatorDataApi({
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    state: "3",
    team: searchData.team,
    job: searchData.job
  })
    .then((res: any) => {
      tableData1.value = res.data.taskList
      tableTotal1.value = res.data.total
      console.log(tableData1.value, "---")
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
// #endregion

// 列表删选功能
// #region
//用于存放随机数用于key属性的绑定
const reload = ref()

// 多选框的列表，列出表格的每一列
const checkBoxGroup = ref(["日期", "归属团队", "职位", "人数", "学历", "工作经验", "性别", "年龄", "专业要求"])

// 当前选中的多选框，代表当前展示的列
const checkedColumns = ref(["日期", "归属团队", "职位", "人数", "学历", "工作经验", "性别", "年龄", "专业要求"])

// colData中列出表格中的每一列，默认都展示
const colData = reactive([
  { title: "日期", istrue: true },
  { title: "归属团队", istrue: true },
  { title: "职位", istrue: true },
  { title: "人数", istrue: true },
  { title: "学历", istrue: true },
  { title: "工作经验", istrue: true },
  { title: "性别", istrue: true },
  { title: "年龄", istrue: true },
  { title: "专业要求", istrue: true }
])

// 监听checkedColumns的变化，当checkedColumns发生变化时，重新渲染表格
const watchCheckedColumns = () => {
  // 遍历colData，将colData中的istrue属性设置为false
  colData.forEach((item) => {
    item.istrue = false
  })
  // 遍历checkedColumns，将checkedColumns中的值在colData中找到对应的列，将istrue属性设置为true
  checkedColumns.value.forEach((item) => {
    colData.forEach((col) => {
      if (item === col.title) {
        col.istrue = true
      }
    })
  })
  // 重新渲染表格
  reload.value = Math.random()
}
// #endregion

// 查看详情按钮
// #region
const dialogVisible = ref<boolean>(false)
const ruleForm = reactive<any>({
  id: 1,
  job: "",
  num: 1,
  education: "",
  exp: "",
  team: "",
  sex: "",
  maxAge: "",
  minAge: "",
  note: "",
  state: "",
  message: ""
})
const handleClick = (res: any) => {
  console.log("拿到当前行数据", res)
  dialogVisible.value = true
  ruleForm.job = res.job // 职位
  ruleForm.num = res.num // 人数
  ruleForm.education = res.education // 学历
  ruleForm.exp = res.exp // 工作经验
  ruleForm.team = res.team // 团队
  ruleForm.sex = res.sex // 性别
  ruleForm.maxAge = res.maxAge // 最大年龄
  ruleForm.minAge = res.minAge //  最小年龄
  ruleForm.note = res.note //  备注
}
// #endregion
// 时间转换
function timestampToTime(timestamp: any) {
  // 时间戳为10位需*1000，时间戳为13位不需乘1000
  const date = new Date(timestamp)
  const Y = date.getFullYear() + "-"
  const M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-"
  const D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " "
  return Y + M + D
}

/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getAddRegulator, { immediate: true })
watch([() => paginationData.currentPage, () => paginationData.pageSize], getAddRegulator1, { immediate: true })
// 搜索

const searchFormRef = ref<FormInstance | null>(null)
const handleSearch = () => {
  if (paginationData.currentPage === 1) {
    getAddRegulator()
  }
  paginationData.currentPage = 1
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    getAddRegulator()
  }
  paginationData.currentPage = 1
}
// 1
const handleSearch1 = () => {
  if (paginationData.currentPage === 1) {
    getAddRegulator1()
  }
  paginationData.currentPage = 1
}
const resetSearch1 = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    getAddRegulator1()
  }
  paginationData.currentPage = 1
}
</script>

<template>
  <div class="app-container">
    <el-tabs v-model="activeName" class="demo-tabs" v-loading="loading">
      <el-tab-pane label="未完成" name="first">
        <!-- 搜索 -->
        <el-card v-loading="loading" shadow="never" class="search-wrapper">
          <el-form ref="searchFormRef" :inline="true" :model="searchData">
            <el-form-item prop="name" label="归属团队">
              <el-input v-model.trim="searchData.team" placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="name" label="职位">
              <el-input v-model.trim="searchData.job" placeholder="请输入" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
              <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
            </el-form-item>
            <!-- <el-tooltip content="下载">
              <el-button type="primary" class="XZ" :icon="Download" circle @click="downLoad" />
            </el-tooltip> -->
          </el-form>
        </el-card>
        <el-icon :size="20" style="float: right; font-size: 33px">
          <el-popover placement="bottom" trigger="hover" width="80">
            <template #reference>
              <el-icon :size="20"><Operation /></el-icon>
            </template>
            <div>
              <el-checkbox-group v-model="checkedColumns" @change="watchCheckedColumns" class="checkbox-wrap">
                <el-checkbox
                  size="large"
                  style="display: block"
                  v-for="item in checkBoxGroup"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-checkbox-group>
            </div>
          </el-popover>
        </el-icon>
        <el-card class="box-card-top">
          <div class="table-center">
            <el-table :data="tableData">
              <!-- 用插槽替换时间戳转换为日期 -->
              <el-table-column v-if="colData[0].istrue" label="日期" align="center">
                <template #default="scope">
                  {{ timestampToTime(scope.row.create) }}
                </template>
              </el-table-column>
              <el-table-column v-if="colData[1].istrue" prop="team" label="归属团队" align="center" />
              <el-table-column v-if="colData[2].istrue" prop="job" label="职位" align="center" />
              <el-table-column v-if="colData[3].istrue" prop="num" label="人数" align="center" />
              <el-table-column v-if="colData[4].istrue" prop="education" label="学历" align="center" />
              <el-table-column v-if="colData[5].istrue" prop="exp" label="工作经验" align="center" />
              <el-table-column v-if="colData[6].istrue" prop="sex" label="性别" align="center" />
              <el-table-column v-if="colData[7].istrue" label="年龄" align="center">
                <template #default="scope"> {{ scope.row.minAge }}-{{ scope.row.maxAge }} </template>
              </el-table-column>
              <el-table-column v-if="colData[8].istrue" prop="technology" label="专业要求" align="center" />
              <el-table-column label="详情" align="center">
                <template #default="scope">
                  <el-button type="primary" size="small" @click="handleClick(scope.row)">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页器 -->
          <div class="pagination">
            <el-pagination
              background
              :layout="paginationData.layout"
              :page-sizes="paginationData.pageSizes"
              :page-size="paginationData.pageSize"
              :total="tableTotal"
              :currentPage="paginationData.currentPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="已完成任务" name="second">
        <!-- 搜索 -->
        <el-card v-loading="loading" shadow="never" class="search-wrapper">
          <el-form ref="searchFormRef" :inline="true" :model="searchData">
            <el-form-item prop="team" label="归属团队">
              <el-input v-model.trim="searchData.team" placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="job" label="职位">
              <el-input v-model.trim="searchData.job" placeholder="请输入" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleSearch1">查询</el-button>
              <el-button :icon="Refresh" @click="resetSearch1">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card class="box-card-top">
          <el-table :data="tableData1" style="width: 100%">
            <!-- 用插槽替换时间戳转换为日期 -->
            <el-table-column v-if="colData[0].istrue" label="日期" align="center">
              <template #default="scope">
                {{ timestampToTime(scope.row.create) }}
              </template>
            </el-table-column>
            <el-table-column prop="team" label="归属团队" align="center" />
            <el-table-column prop="job" label="职位" align="center" />
            <el-table-column prop="num" label="人数" align="center" />
            <el-table-column prop="education" label="学历" align="center" />
            <el-table-column prop="exp" label="工作经验" align="center" />
            <el-table-column prop="sex" label="性别" align="center" />
            <el-table-column label="年龄" align="center">
              <template #default="scope"> {{ scope.row.minAge }}-{{ scope.row.maxAge }} </template>
            </el-table-column>
            <el-table-column prop="technology" label="专业要求" align="center" />
            <el-table-column label="状态" align="center">
              <template #default>
                <el-button link type="primary" size="small">已完成</el-button>
              </template>
            </el-table-column></el-table
          >
          <div class="pagination">
            <el-pagination
              background
              :layout="paginationData.layout"
              :page-sizes="paginationData.pageSizes"
              :page-size="paginationData.pageSize"
              :total="tableTotal1"
              :currentPage="paginationData.currentPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <!-- 详情弹出框 -->
    <el-dialog v-model="dialogVisible" :model="ruleForm" title="详细信息" width="30%">
      <el-form :model="ruleForm" ref="ruleFormRef" label-width="120px">
        <el-form-item prop="job" label="职位">
          <el-input v-model="ruleForm.job" disabled />
        </el-form-item>
        <el-form-item prop="num" label="人数">
          <el-input v-model="ruleForm.num" disabled />
        </el-form-item>
        <el-form-item prop="education" label="学历">
          <el-input v-model="ruleForm.education" disabled />
        </el-form-item>
        <el-form-item prop="exp" label="工作经验">
          <el-input v-model="ruleForm.exp" disabled />
        </el-form-item>
        <el-form-item prop="team" label="团队">
          <el-input v-model="ruleForm.team" disabled />
        </el-form-item>
        <el-form-item prop="sex" label="性别">
          <el-input v-model="ruleForm.sex" disabled />
        </el-form-item>
        <el-form-item prop="maxAge" label="最大年龄">
          <el-input v-model="ruleForm.maxAge" disabled />
        </el-form-item>
        <el-form-item prop="minAge" label="最小年龄">
          <el-input v-model="ruleForm.minAge" disabled />
        </el-form-item>
        <el-form-item prop="note" label="备注">
          <el-input v-model="ruleForm.note" disabled />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.table-center {
  margin-bottom: 20px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
